<template>
	<div class="person">
		<ul>
			<li>姓名：{{name}}</li>
			<li>性别：{{gender}}||{{getGender}}</li>
			<li>年龄：{{age}}</li>
			<input type="text" @input="setAge" :value="age" />
		</ul>
	</div>
</template>

<script>
	import { mapState,mapGetters,mapMutations } from 'vuex'
	export default {
		name:"Person",
		data(){
			return {
				count:10
			}
		},
		// computed:mapState(['name','gender','age']),
		//对象方式
		computed:{
			test(){
				return 'test'
			},
			getGender(){
				return this.$store.getters.getGender(2)
			},
			
			// ...mapGetters(['getGender']),
			...mapState({
				name :state => state.name,
				gender :'gender',
				age(state) {
					return state.age
				}
			}),
		},
		
		
		// computed:mapState({
		// 	name :state => state.name,
		// 	gender :'gender',
		// 	age(state) {
		// 		return state.age
		// 	}
		// }),
		methods:{
			// setAge(e){
			// 	this.$store.commit('setAge',e)
			// }
			...mapMutations(['setAge'])
		}
		// computed:{
		// 	name(){
		// 		return this.$store.state.name
		// 	},
		// 	gender(){
		// 		return this.$store.state.gender
		// 	},
		// 	age:{
		// 		get(){
		// 			return this.$store.state.age
		// 		},
		// 		set(value){
		// 			this.$store.commit('setAge',value)
		// 		}
		// 	}
		// }
	}
</script>

<style>
</style>
